<template>
    <div class="chartWrap3">
        <div id="main3"></div>
    </div>
</template>
<script>
import deal from '@/api/deal/index'
import { toast} from '@/util/index'
export default {
	data(){
		return{
			upColor:'#ff335b',
			downColor:'#33ffc3',
	        values:[],
		 	volumes:[],
		 	categoryData:[],
		 	datas:{
		        categoryData: [],
		        values:[],
		        volumes: []
		   },
		   rawData:[],
		   kTop:"",
			   	
			 	
		}
	},
    methods: {
    	pdr(){
    		var dpr= $("html").attr("data-dpr");
    		if(dpr==1){
    			this.tum='10';
    			this.kTop="50%";
    		}else if(dpr==2){
    			this.tum='20';
    			this.kTop="60%";
    		}else if(dpr==3){
    			this.tum='30';
    			this.kTop="65%";
    		}
    	},
   		 getData() {
	 		this.pdr();
		    for (var i in this.data) {
		    	var datee = this.subString(this.data[i].date);
		    	var open_price= parseFloat(this.data[i].open_price);
		    	var close_price= parseFloat(this.data[i].close_price);
		    	var low_price= parseFloat(this.data[i].low_price);
		    	var high_price= parseFloat(this.data[i].high_price);
		    	var business_amount= parseFloat(this.data[i].business_amount);
		    	var num =parseFloat(i);
		    	
		    	
		    	
		    	this.rawData.push([  
		           datee, // the date  
		           open_price, // open 
		           close_price, // close
		           low_price, // low   
		           high_price, // high  
		           business_amount// 成交量
		        ]);
		    	
		      	
		    }
		   	this.splitData(this.rawData);
		},
		splitData(rawData) {
		    var categoryData = [];
		    var values = [];
		    var volumes = [];
		    for (var i = 0; i < rawData.length; i++) {
		        categoryData.push(rawData[i].splice(0, 1)[0]);
		        values.push(rawData[i]);
		        volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
		    }
	        this.datas.categoryData=categoryData;
	        this.datas.values=values;
	        this.datas.volumes=volumes;
	        
	        this.initData();
		   
		},
    	calculateMA(dayCount, data) {
		    var result = [];
		    for (var i = 0, len = data.length; i < len; i++) {
		        if (i < dayCount) {
		            result.push('-');
		            continue;
		        }
		        var sum = 0;
		        for (var j = 0; j < dayCount; j++) {
		            sum += data[i - j][1];
		        }
		        result.push(+(sum / dayCount).toFixed(3));
		    }
		    return result;
		},
    	subString(data){
    		return data.substr(0,4)+"-"+data.substr(4,2)+"-"+data.substr(6,2);
    	},
    	
        initData() {
        	var echarts = require('echarts');
        	var myChart = echarts.init(document.getElementById('main3'));
        	myChart.setOption({
		      	 	backgroundColor: '#141723',
			        animation: false,
			        legend: {
			            tooltip:{
					        show:false
					    }
			        },
			       /* tooltip: {
			            trigger: 'axis',
			            axisPointer: {
			                type: 'cross'
			            },
			            backgroundColor: 'rgba(245, 245, 245, 0.8)',
			            borderWidth: 1,
			            borderColor: '#ccc',
			            padding: 10,
			            textStyle: {
			                color: '#000'
			            },
			            position: function (pos, params, el, elRect, size) {
			                var obj = {top: 10};
			                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
			                return obj;
			            }
			            // extraCssText: 'width: 170px'
			        },*/
			        axisPointer: {
			            link: {xAxisIndex: 'all'},
			            label: {
			                backgroundColor: '#777'
			            }
			        },
			       /* toolbox: {
			            feature: {
			                dataZoom: {
			                    yAxisIndex: false
			                },
			                brush: {
			                    type: ['lineX', 'clear']
			                }
			            }
			        },*/
			       /* brush: {
			            xAxisIndex: 'all',
			            brushLink: 'all',
			            outOfBrush: {
			                colorAlpha: 0.1
			            }
			        },*/
			        visualMap: {
			            show: false,
			            seriesIndex: 5,
			            dimension: 2,
			            pieces: [{
			                value: 1,
			                color: this.downColor
			            }, {
			                value: -1,
			                color: this.upColor
			            }]
			        },
			        grid: [
			            {
			                left: '2%',
			                right: '5%',
			                height:this.kTop
			            },
			            {
			                left: '2%',
			                right: '5%',
			                top: '76%',
			                height: '20%'
			            }
			        ],
			        xAxis: [
			            {
			                type: 'category',
			                data: this.datas.categoryData,
			                scale: true,
			                boundaryGap : false,
			                axisLine: {onZero: false},
			                splitLine: {show: false},
			                splitNumber: 20,
			                min: 'dataMin',
			                max: 'dataMax',
			                axisLine:{show:false}, // 去掉轴线
			                axisLabel: {
								show: true,
                                textStyle: {
                                    color: '#fff', //刻度签颜色
                                    fontSize:this.tum
                                }//刻度线标签颜色
							},
			                axisPointer: {
			                    z: 100
			                }
			            },
			            {
			                type: 'category',
			                gridIndex: 1,
			                data:this.datas.categoryData,
			                scale: true,
			                boundaryGap : false,
			                axisLine: {onZero: false},
			                axisTick: {show: false},
			                splitLine: {show: false},
			                axisLabel: {show: false},
			                splitNumber: 20,
			                min: 'dataMin',
			                max: 'dataMax'
			                
			            }
			        ],
			        yAxis: [
			            {
			            	type : 'value', 
			                scale: true,
			                position:'right',
			                x: 14,
			                splitArea:{show: false},
			                axisLine: {show: false},
			                axisTick: {show: false},
			                splitLine:{show: false},
			                axisLabel: {
								show: true,
                                textStyle: {
                                    color: '#56627c', //刻度签颜色
                                    fontSize:this.tum
                                }
							}
			                
			               
			            },
			            {
			                scale: true,
			                gridIndex: 1,
			                splitNumber: 2,
			                axisLine: {show: false},
			                axisTick: {show: false},
			                splitLine: {show:false},
			               
			            }
			        ],
			        dataZoom: [
			            {
			                type: 'inside',
			                xAxisIndex: [0, 1],
			                start: 70,
			                end: 90
			            },
			            {
			                show: false,
			                xAxisIndex: [0, 1],
			                type: 'slider',
			                top: '85%',
			                start: 70,
			                end: 90
			            }
			        ],
			        series: [
			            {
			                name: 'Dow-Jones index',
			                type: 'candlestick',
			                data: this.datas.values,
			                itemStyle: {
			                    normal: {
			                        color: this.upColor,
			                        color0: this.downColor,
			                        borderColor: null,
			                        borderColor0: null
			                    }
			                },
			                tooltip: {
			                    formatter: function (param) {
			                        param = param[0];
			                        return [
			                            'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
			                            'Open: ' + param.data[0] + '<br/>',
			                            'Close: ' + param.data[1] + '<br/>',
			                            'Lowest: ' + param.data[2] + '<br/>',
			                            'Highest: ' + param.data[3] + '<br/>'
			                        ].join('');
			                    }
			                }
			            },
			             {
			                name: 'MA5',
			                type: 'line',
			                data: this.calculateMA(5, this.datas.values),
			                smooth: true,
			                lineStyle: {
			                    normal: {opacity: 0.5}
			                }
			            },
			            {
			                name: 'MA10',
			                type: 'line',
			                data: this.calculateMA(10, this.datas.values),
			                smooth: true,
			                lineStyle: {
			                    normal: {opacity: 0.5}
			                }
			            },
			            {
			                name: 'MA20',
			                type: 'line',
			                data: this.calculateMA(20, this.datas.values),
			                smooth: true,
			                lineStyle: {
			                    normal: {opacity: 0.5}
			                }
			            },
			            {
			                name: 'MA30',
			                type: 'line',
			                data: this.calculateMA(30,this.datas.values),
			                smooth: true,
			                lineStyle: {
			                    normal: {opacity: 0.5}
			                }
			            },       
			            {
			                name: 'Volume',
			                type: 'bar',
			                xAxisIndex: 1,
			                yAxisIndex: 1,
			                data:this.datas.volumes
			            }
			        ]
		    });
		    
        }
    },
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    mounted() {
    
    	let senddata={
  			code:this.$route.query.stockNum||"000001",
  			type:8,
  			plat:"mlj"
  		}
  		deal.getKlineByCode(senddata).then((data) => {
			if (data.data.code == 200) {
				this.data=data.data.data;
				this.getData(); 
			}else if(data.data.code==222){
	            this.$router.push({path:'/login'})
	        } else {
				toast(data.data.message)
			}
		})
    	
    },
    computed: {
	  getUserData() {
	    return this.buyArr=this.$store.state.buyArr;
	  }
	},
	watch: {
	  getUserData(val) {
	    this.buyArr = val;
	  }
	}
}
</script>


<style lang="less" scoped>
@import '../../../less/config.less';
.chartWrap3 {
   	width:100%;
    height: 7.6533rem;
    #main3 {
        width:10rem;
        height:7.6533rem;
        background: #141723;
    }
}
</style>

































